<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <canvas id="can"></canvas>
  
  <script>
    const oCan = document.getElementById('can');
    const documentElement = document.documentElement;
    const width = documentElement.clientWidth;
    const height = documentElement.clientHeight;
    const ctx = oCan.getContext('2d');

    adaptDpr(oCan, width, height);

    /**
     * 设备物理像素：分辨率  1920 * 1080  
     * 像素：物理屏幕上一个一个的格子
     *      1pt * 1pt => 表示设备显示像素的物理格子的大小
     * 
     * 设备独立像素：定义UI布局时需要用到的虚拟的像素单位
     *      px
     * 
     * devicePixelRatio: 设备物理像素 / 设备独立像素 => 2
     * 
     * 浏览器宿主 => devicePixelRatio => 算出设备独立像素
     *          => 2pt => 1px => 2pt * 2pt
     */

     /**
      * Canvas是由设置、绘制、渲染三部分组成的
      * 浏览器样式渲染跟Canvas的关系只在渲染阶段
      */ 
    
    ctx.strokeStyle = '#000';

    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.moveTo(100, 50);
    ctx.lineTo(100, 550);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.moveTo(200, 50);
    ctx.lineTo(200, 550);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth = 3;
    ctx.moveTo(300, 50);
    ctx.lineTo(300, 550);
    ctx.stroke();

    function adaptDpr (canvas, width, height) {
      const dpr = window.devicePixelRatio;

      canvas.width = Math.floor(width * dpr);
      canvas.height = Math.floor(height * dpr);
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      ctx.scale(dpr, dpr);
    }
  </script>
</body>
</html>